import React, { useEffect, useRef, useState } from 'react';
import styles from "./login.module.scss";
import { LoginStatic } from './LoginStatic';
import { LoginQq } from './LoginQq';
import { LoginWx } from './LoginWx';
import { LoginPhone } from './LoginPhone';
import { getCookie, stopPropagation } from '@/utils';
import { useStore } from '@/store';
import { observer } from 'mobx-react-lite';
import { getToken } from '@/utils/auth';
import router from 'next/router';


function LoginComp() {
    const store = useStore()
    // const [isLoginBox,setIsLoginBox] = useState(false) 
    const [isAllow, setIsAllow] = useState(true)
    const [showLoginPanel, setShowLoginPanel] = useState(false)
    const [loginType, setLoginType] = useState('wechat')
    const [loginMode, setLoginMode] = useState('wx')
    const loginCheckbox = useRef<HTMLInputElement>(null)
    const close = () => {
        store.user.setOpenLoginModal(false)
    }
    /**
     * 关闭按钮（点击事件）
     * @param e
     */
    const closeClickEvent = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
        close()
        stopPropagation(e)
    }
    const loginCheckboxChangeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
        setIsAllow((loginCheckbox.current as HTMLInputElement).checked)
        stopPropagation(e)
    }
    const loginGerUserInfo = () => {
        
        // 设置user Store里面的信息
        store.user.fetchUserInfo(() => { 
            store.user.featchUserDrawChannel()
            store.user.fetchUserPoint()
        }, () => { 
            store.user.setOpenLoginModal(true)
        })
        close()
    }

    useEffect(() => {
        store.user.fetchUserInfo(() => { 
            store.user.featchUserDrawChannel()
            store.user.fetchUserPoint()
        }, () => { 
            store.user.setOpenLoginModal(true)
        })
        try {
            const loginLast = getCookie('login_type_info')
            setLoginMode(loginLast)
        } catch (error) {
            setLoginMode('')
        }
    }, [])

    if (!store.user.openLoginModal)return null
    return (
        <div className={store.user.openLoginModal?`${styles.loginPanel} ${styles.active}`:styles.loginPanel}>
            <div className={styles.registrationBg} style={{ display: "inline-block" }}>
                <div className={styles.registration} style={{ display: "inline-block" }}>
                    <div className={styles.login_image}>
                    </div>
                    <LoginStatic></LoginStatic>
                    <div className={styles.regContent}>
                        {loginType == 'wechat' && <div className={styles.req_header}>
                            <i className={`${styles.iconfont} ${styles.iconWeixin} ${styles.wechatLogo}`}></i>
                            <span className={styles.header_tips}>微信扫码<a className={styles.headerTipsFocus}>关注</a>立即登录</span>
                        </div>}
                        {!showLoginPanel && <span className={`iconfont icon-cuowu ${styles.fr} ${styles.iconClose} ${styles.loginBoxClose} ${styles.iconGuanbi}`} onClick={closeClickEvent}></span>}

                        {isAllow && <LoginPhone getUserInfo={loginGerUserInfo} loginType={loginType} />}


                        {isAllow && <LoginWx loginType={loginType} loginMode={loginMode} getUserInfo={loginGerUserInfo} />}
                        {isAllow && <p id="login_account_tip" className={styles.loginAccountTip}><span>微信和QQ是两个独立账号， 账号信息不互通</span></p>}

                        {isAllow && <LoginQq loginType={loginType} loginMode={loginMode} getUserInfo={loginGerUserInfo} />}

                        {isAllow && <span
                            className={styles.phoneLogin}
                            onClick={
                                () => {
                                    setLoginType(loginType == 'wechat' ? 'phone' : 'wechat')
                                }
                            }><span className={`iconfont ${styles.iconfont} ${loginType == 'phone' ? `${styles.iconWeixin} icon-weixin` : `${styles.iconShouji} icon-a-mob1`}`}>
                                {loginType !== 'phone' && loginMode == 'phone' &&
                                    <div className={styles.loginmode}
                                        style={{
                                            right: -50,
                                        }}>
                                        <div className={styles.loginArrow}></div>
                                        <div className={styles.loginText}>上次登录</div>
                                    </div>
                                }
                            </span>{loginType == 'phone' ? '微信登录' : '手机号登录'}
                        </span>}

                        <div className={styles.regDeal}>
                            <input type="checkbox" checked={isAllow} ref={loginCheckbox} onChange={loginCheckboxChangeEvent} />
                            <label htmlFor="reg-deal-check1">
                                我已阅读并同意<br />
                                <a href="//818ps.com/page/1" target="_blank">《图怪兽网络服务使用协议》</a>
                                和
                                <a href="//818ps.com/page/17" target="_blank">《图怪兽用户隐私条款》</a>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
const Login = observer(LoginComp)
export {Login };
